<template>
	<view :style="[AppSkinVar]" class="goods-body bg-white e-m-b-20 ">
		<view class="e-m-b-12">
			<load-image mode="aspectFill" :size="['344rpx','346rpx']"  :src="item.coverImg">
			</load-image>
		</view>
		<view class=" e-flex-column e-flex-items-start e-rela e-p-20">
			<view class="goods-title e-rela e-m-b-10 e-font-26 lh-40">
				<text class="self-icon e-m-r-10" v-if="appHasOwn&&item.hasOwn == 1">
					{{ $t('classify.自营') }}
				</text>
				{{ item.productName }}
			</view>
		
			<view >
				<view class="price fw-600 c-red lh-44">
					<text class="e-font-24">{{$unitEn}}</text>
					<text class="e-font-32">{{ item.price }}</text>
				</view>
				<view class="e-font-24 c-placeholder lh-34">
					<text class="e-m-r-6">{{item.buyStock}}</text>
					<text>{{ $t('spellgroup.haveSpell') }}</text>
				</view>
			</view>
			<view class="car-icon-button bg-primary e-abso text-center" @tap="$goTo('/pages/classify/goods/info/index',  {
							id: item.productId,
							skuId: item.skuId
						})">
				<text class="c-white e-font-26">{{$t('spellgroup.spellGroup')}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {APP_HAS_OWN} from '@/env'
	export default {
		// #ifdef MP-WEIXIN
		// 将自定义节点设置成虚拟的，更加接近Vue组件的表现
		options: {
			virtualHost: true
		},
		// #endif
		props: {
			item: Object
		},
		data() {
			return {
				appHasOwn:APP_HAS_OWN
			}
		}
	}
</script>

<style lang="scss" scoped>
	.goods-body {
		border-radius: 10rpx;
		.goods-title {
			flex: 1;
			.self-icon {
				left: 0;
				top: 0;
				background: linear-gradient(90deg, #F5222D 0%, #FF6B65 100%);
				border-radius: 6px;
			}
			.indent {
				padding-left: 10rpx;
			}
		}
		.car-icon-button {
			right: 20rpx;
			bottom: 20rpx;
			border-radius: 25rpx;
			padding: 8rpx 26rpx;
			line-height: 36rpx;
		}
	}
	.lh-44 {
		line-height: 44rpx;
	}
	.lh-34 {
		line-height: 34rpx;
	}
	.lh-40 {
		line-height: 40rpx;
	}
</style>